<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(0)

if (route.query.id === '0') {
    active.value = 0
} else {
    active.value = 1
}

</script>
<template>
    <div class="fans">
        <div class="back" @click="$router.back()" style="margin-left:15px; margin-top: 30px;">
            <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2340" width="18" height="18">
                <path
                    d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                    fill="" p-id="2341"></path>
            </svg>
            <span style="font-size: 18px; color: #000; margin-left: 120px;">关注与粉丝</span>
        </div>
        <div class="fans-list">
            <van-tabs v-model:active="active">
                <van-tab title="关注23">
                    <div class="fans-list-item" v-for="item in 10">
                        <div class="fans-list-item-img">
                            <van-image
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/ta%E7%9A%84%E5%85%B3%E6%B3%A8/%E5%A4%B4%E5%83%8F_u2613-0.svg" />
                            <span>
                                <p style="font-size: 16px; color: #000;">摄氏零度</p>
                                <p style="color: #999;">1086篇游记　3.3万粉丝</p>
                            </span>
                            <button>关注</button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="粉丝1032万">
                    <div class="fans-list-item" v-for="item in 10">
                        <div class="fans-list-item-img">
                            <van-image
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/ta%E7%9A%84%E5%85%B3%E6%B3%A8/%E5%A4%B4%E5%83%8F_u2613-0.svg" />
                            <span>
                                <p style="font-size: 16px; color: #000;">摄氏零度</p>
                                <p style="color: #999;">1086篇游记　3.3万粉丝</p>
                            </span>
                            <button>关注</button>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.fans {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .van-tabs {
        width: 90%;
        margin: 10px auto;
        height: 40px;
        --van-tabs-bottom-bar-width: 150px;

        .fans-list-item-img {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 15px;

            span {
                position: relative;
                left: -30px;
            }

            button {
                width: 70px;
                height: 26px;
                color: white;
                border: none;
                background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
                border-radius: 35px;
            }
        }
    }
}
</style>